<template>
  <div class="login-wrapper" :class="{ active: rotate }">
    <div class="del" @click="deldialog" @mouseenter="enter" @mouseleave="leave">
      <img src="/images/icon/del.svg" alt="" />
    </div>
    <div class="header" v-if="flag">Login</div>
    <div class="header" v-else>Sign up</div>
    <div class="form-wrapper">
      <input
        type="text"
        name="username"
        placeholder="username"
        class="input-item"
        autocomplete="off"
        maxlength="6"
      />
      <input
        type="password"
        name="password"
        placeholder="password"
        class="input-item"
      />
      <div class="btn" v-if="flag" @click="tologin">Login</div>
      <div class="btn" v-else @click="tosignup">Sign up</div>
    </div>
    <div class="msg">
      <template v-if="flag">
        <span>Don't have account?</span>
        <a href="#" @click="Signup">Sign up</a>
      </template>
      <template v-else>
        <span>Do you already have an account?</span>
        <a href="#" @click="login">log in</a>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { homepage } from "@/store/index.js";
const store = homepage();
let flag = ref(true);
// 对话框表单数据
const form = reactive({
  name: "",
  useremail: "",
  password: "",
});

// 取消对话框
const deldialog = () => {
  store.$patch((state) => {
    state.loginshow = false;
  });
};


// 注册account
const Signup = () => {
  flag.value = false;
};
const login = () => {
  flag.value = true;
};

// 注册事件
const tosignup = () => {
  console.log("注册账号");
  flag.value = true;
};
// 登陆事件
const tologin = () => {
  console.log("登录账号");
};

// rotate卡片翻转
let rotate = ref(false);
const enter = () => {
  rotate.value = true;
};

const leave = () => {
  rotate.value = false;
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  background-color: #fff;
  width: 398px;
  height: 528px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate3d(1, 1, 0, 5deg);
  &.active {
    transform: translate(-50%, -50%) rotate3d(1, 1, 0, 20deg);
  }
  @media (max-width: 720px) {
    width: 350px;
    height: 450px;
  }
  .header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    @media (max-width: 720px) {
      line-height: 150px;
    }
  }
  .form-wrapper {
    .input-item {
      display: block;
      width: 100%;
      margin-bottom: 20px;
      border: 0;
      padding: 10px;
      border-bottom: 1px solid rgb(128, 125, 125);
      font-size: 15px;
      outline: none;
      &:placeholder {
        text-transform: uppercase;
      }
    }
    .btn {
      text-align: center;
      padding: 10px;
      width: 100%;
      margin-top: 40px;
      background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
      color: #fff;
      cursor: pointer;
    }
  }
  .msg {
    text-align: center;
    line-height: 88px;
    a {
      text-decoration-line: none;
      color: #abc1ee;
    }
  }
  .del {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    img {
      cursor: pointer;
      margin: auto;
      transform: scale(1.2);
    }
  }
}

</style>
